<template>
  <div class="app-container">
    <el-card>
      <!--用户数据-->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="实践课程">
              <el-select v-model="queryParams.taskType" placeholder="请选择" clearable @change="changeType">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.type" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实践任务名称">
              <el-select v-model="queryParams.id" filterable clearable @change="handleQuery">
                <el-option v-for="item in selectorList" :key="item.id" :label="item.taskName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实践报告名称">
              <el-input v-model.trim="queryParams.projectName" placeholder="输入内容" clearable @input="handleQuery"
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="报告时间">
              <el-date-picker v-model="dateRangeQuery" @change="handleQuery" value-format="yyyy-MM-dd" type="daterange"
                range-separator="-" style="width: 100%" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="学院">
              <el-select v-model="queryParams.faceXy" filterable clearable @change="handleQuery('学院')" multiple
                collapse-tags>
                <el-option v-for="item in proxyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专业">
              <el-select v-model="queryParams.faceZy" filterable clearable @change="handleQuery('专业')" multiple
                collapse-tags>
                <el-option v-for="item in prozyList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年级">
              <el-select v-model="queryParams.njName" clearable @change="handleQuery('年级')">
                <el-option v-for="item in pronjAllList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="班级">
              <el-select v-model="queryParams.faceBj" filterable clearable @change="handleQuery" multiple collapse-tags>
                <el-option v-for="item in probjList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="报告状态">
              <el-select v-model="queryParams.status" placeholder="请选择" clearable @change="handleQuery">
                <el-option v-for="item in taskStatusList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model.trim="queryParams.studentName" @input="handleQuery" placeholder="输入学生姓名" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学号">
              <el-input v-model.trim="queryParams.stNumber" @input="handleQuery" placeholder="输入学生学号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>
          </el-col>
          <el-col :span="1.5">
            <el-form-item id="butId">
              <!-- <el-button icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> -->
              <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="success" plain size="mini" @click="submitAllForm" :disabled="multiple">批量通过</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain size="mini" @click="handleAllDelete" :disabled="multiple">批量驳回</el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" :data="tableList" @sort-change="sortChange" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" :selectable="selectable" />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="学生姓名" align="center" width="100" key="studentName" prop="studentName" sortable="custom"
          :show-overflow-tooltip="true" />
        <el-table-column label="学号" align="center" sortable="custom" key="stNumber" prop="stNumber"
          :show-overflow-tooltip="true" />
        <el-table-column label="年级" align="center" key="njName" prop="njName" :show-overflow-tooltip="true" />
        <el-table-column label="学院" align="center" key="xyName" prop="xyName" sortable="custom"
          :show-overflow-tooltip="true" />
        <el-table-column label="专业" align="center" key="zyName" prop="zyName" :show-overflow-tooltip="true" />
        <el-table-column label="班级" align="center" key="bjName" prop="bjName" :show-overflow-tooltip="true" />
        <el-table-column label="实践任务名称" width="140" align="center" sortable="custom" key="taskName" prop="taskName"
          :show-overflow-tooltip="true" />
        <el-table-column label="实践报告名称" width="140" align="center" key="projectName" prop="projectName"
          :show-overflow-tooltip="true" />
        <el-table-column label="实践课程" align="center">
          <template slot-scope="scope">
            {{ scope.row.taskType == 1 ? '劳动教育' : scope.row.taskType == 2 ? '职业素养' : scope.row.taskType == 3 ?
              '应急安全' : scope.row.taskType == 4 ? '思政实践' : '创新创业' }}
          </template>
        </el-table-column>
        <el-table-column label="报告状态" align="center" key="status">
          <template slot-scope="scope">
            {{ scope.row.status == 1 ? '未审批' : scope.row.status == 2 ? '院级通过' : scope.row.status == 3 ? '校级通过' : '已驳回' }}
          </template>
        </el-table-column>
        <el-table-column label="积分上限" align="center" width="100" key="acquisitionPoints" prop="acquisitionPoints"
          sortable="custom" :show-overflow-tooltip="true" />
        <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 2" type="text" @click="handleUpdate(scope.row)"
              v-hasPermi="['practice:user:schoolCheck']">审核</el-button>
            <el-button v-if="scope.row.status == 2" style="color: #f56c6c;" type="text" @click="handleDelete(scope.row)"
              v-hasPermi="['practice:user:schoolCheck']">驳回</el-button>

            <el-button v-else type="text" @click="handleUpdate(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
    <!-- 添加或修改用户配置对话框 -->
    <el-dialog title="实践报告审核" :visible.sync="open" width="60%" center append-to-body class="dialogClass">
      <el-form label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="任务名称: ">
              <span>{{ form.taskName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实践课程: ">
              <span>{{ form.taskType == 1 ? '劳动教育' : form.taskType == 2 ? '职业素养' : form.taskType == 3 ?
                '应急安全' : form.taskType == 4 ? '思政实践' : '创新创业' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="积分上限: ">
              <span>{{ form.pointsCap }}</span>
            </el-form-item>
          </el-col>
          <el-card>
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">学生信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名: " label-width="50px">
                <!-- <span>{{ form.studentName }}</span> -->
                <el-input v-model="form.studentName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学号: " label-width="50px">
                <!-- <span>{{ form.stNumber }}</span> -->
                <el-input v-model="form.stNumber" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="学院: " label-width="50px">
                <!-- <span>{{ form.xyName }}</span> -->
                <el-input v-model="form.xyName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="专业: " label-width="50px">
                <!-- <span>{{ form.zyName }}</span> -->
                <el-input v-model="form.zyName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="班级: " label-width="50px">
                <!-- <span>{{ form.bjName }}</span> -->
                <el-input v-model="form.bjName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年级: " label-width="50px">
                <!-- <span>{{ form.acquisitionPoints }}</span> -->
                <el-input v-model="form.njName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-card>
          <!-- <el-col :span="8">
            <el-form-item label="时间: " label-width="50px">
              <span>
                {{ (form.studentStartTime || '').slice(0, 10) }} ~ {{ (form.studentEndTime || '').slice(0, 10) }}
              </span>
            </el-form-item>
          </el-col> -->

          <!-- <el-col :span="24">
            <el-form-item label="文件:">
              <div class="fileImage">
                <div v-for="item in form.fileList" :key="item.id">
                  <img :src="fielHttp + item.file" alt="" v-if="item.fileType == 'png' || item.fileType == 'jpg'"
                    class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)" />
                  <video :src="fielHttp + item.file" controls v-if="item.fileType == 'mp4'"
                    class="w-100 h-150 mr-100 one_overflow w-136 fs-140 col333 pointer" @click="download(item.file)" />
                  <div class="one_overflow w-200 fs-14 col333 pointer"
                    v-if="item.fileType != 'png' && item.fileType != 'jpg' && item.fileType != 'mp4'"
                    @click="download(item.file)">{{ item.fileName }}</div>
                </div>
              </div>
            </el-form-item>
          </el-col> -->

          <el-card style="margin-top: 5px;margin-bottom: 5px;">
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">报告信息</div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践报告名称: " label-width="110px">
                <!-- <span>{{ form.projectName }}</span> -->
                <el-input v-model="form.projectName" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践开始时间: " label-width="110px">
                <!-- <span>{{ form.practiceStartTime }}</span> -->
                <el-input v-model="form.practiceStartTime" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实践结束时间: " label-width="110px">
                <!-- <span>{{ form.practiceEndTime }}</span> -->
                <el-input v-model="form.practiceEndTime" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="实 践 地 点: " label-width="110px">
                <!-- <span>{{ form.practicePlace }}</span> -->
                <el-input v-model="form.practicePlace" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="报 告 状 态: " label-width="110px">
                <el-input v-model="form.statusType" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item label="实践详细说明: " label-width="110px">
                <el-input v-model="form.detail" placeholder="" readonly size="small"></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="24">
              <el-form-item label="实践详细说明: " label-width="110px">
                <el-input v-model="form.detail" readonly resize="none" type="textarea"
                  :autosize="{ minRows: 2, maxRows: 3 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="form.status == '4'">
              <el-form-item label="驳回原因: " label-width="110px">
                <el-input v-model="form.reason" resize="none" type="textarea" readonly
                  :autosize="{ minRows: 2, maxRows: 3 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="填 报 附 件: " label-width="110px">
                <div class="fileImage">
                  <div v-for="item in form.studentFileList" :key="item.id">
                    <img :src="item.fileSrc" alt=""
                      v-if="item.fileType == 'png' || item.fileType == 'jpg' || item.fileType == 'jpeg' || item.fileType == 'able' || item.fileType == '图片'"
                      class="w-100 h-150 mr-20 one_overflow w-136 fs-140 col333 pointer"
                      @click="download(item.fileSrc)" />
                    <video :src="item.fileSrc" controls
                      v-if="item.fileType == 'mp4' || item.fileType == 'avi' || item.fileType == '视频'"
                      class="w-100 h-150 mr-20 one_overflow w-136 fs-140 col333 pointer" />
                    <div class="one_overflow w-200 fs-14 col333 pointer"
                      v-if="item.fileType != 'png' && item.fileType != 'jpg' && item.fileType != 'jpeg' && item.fileType != 'able' && item.fileType != 'mp4' && item.fileType != 'avi' && item.fileType != '图片' && item.fileType != '视频'"
                      @click="downloadFile(item)">{{ item.fileName }}</div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-card>
          <el-card style="padding-bottom: 10px;">
            <el-col :span="24">
              <el-form-item label="">
                <div class="inforClass">审核过程</div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-steps :active="active" align-center>
                <el-step v-for="(item, index) in activeList" :title="item.title">
                  <template #description>
                    <div class="custom-step-desc">{{ item.time }}</div>
                    <div v-if="form.remark && index == 1" class="custom-step-desc">{{ form.remark }}</div>
                  </template>
                </el-step>
              </el-steps>
            </el-col>
          </el-card>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleDelete(form)" v-hasPermi="['practice:user:schoolCheck']" v-if="form.status == 2">驳
          回</el-button>
        <el-button type="primary" @click="submitForm" v-hasPermi="['practice:user:schoolCheck']" v-if="form.status == 2">通
          过</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>

import axios from 'axios';
import { selectorListTaks } from "@/api/task/index";
import { getSchoolCheck, checkPass } from "@/api/task/audit";
import { listProxy, listProzy, listProbj, pronjList } from "@/api/project/prold";
export default {
  name: "hospitalLevelAudits",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      numbers: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      tableList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 日期范围
      dateRange: [],
      // 角色选项
      roleOptions: [],
      dateRangeQuery: [], // 查询
      prozwList: [],
      proxyList: [], // 学院
      prozyList: [], // 专业
      probjList: [], // 年级
      pronjAllList: [],
      selectorList: [], //
      active: 1,
      activeList: [],

      taksnNumList: [1, 2, 3, 4, 5], // 次数
      integralList: [50, 100, 150, 200, 250, 300, 350, 400], // 积分上限
      practiceTypeList: [], // 实践课程
      taskStatusList: [
        // { name: '未审核', id: 1 },
        { name: '院级通过', id: 2 },
        { name: '校级通过', id: 3 },
        { name: '已驳回', id: 4 }
      ], // 状态
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        xyId: undefined
      },
      fielHttp: process.env.VUE_APP_BASE_FILE, // 图片前缀
    };
  },
  watch: {},
  created() {
    const permissList = sessionStorage.getItem('practiceTypes').split(',');
    const typeMap = {
      1: { type: '劳动教育', id: 1 },
      2: { type: '职业素养', id: 2 },
      3: { type: '应急安全', id: 3 },
      4: { type: '思政实践', id: 4 },
      5: { type: '创新创业', id: 5 }
    };

    permissList.forEach(v => {
      if (typeMap[v]) {
        this.practiceTypeList.push(typeMap[v]);
      }
    });
    this.getSelectorListTaks();
    this.getList();
    this.getListProxy();
    this.getListProzy();
    this.getListProbj();
    this.getListPronj();
  },
  methods: {
    async fetchImage(urls, index) {
      const that = this;
      try {
        const response = await axios.get(this.fielHttp + urls, {
          responseType: 'arraybuffer' // 获取二进制数据
        });
        const blob = new Blob([response.data], { type: 'image/jpeg' });
        const imageUrl = URL.createObjectURL(blob);
        that.form.studentFileList[index].fileSrc = imageUrl;
        that.$forceUpdate();
      } catch (error) {
        console.error('Failed to fetch image:', error);
      }
    },
    getSelectorListTaks() {
      selectorListTaks({ practiceType: this.queryParams.taskType }).then(response => {
        this.selectorList = response.rows;
      })
    },
    // 判断某行是否可选
    selectable(row) {
      return row.status === 2;
    },
    sortChange(row) {
      const sortMap = {
        studentName: 'studentNameSort',
        stNumber: 'stNumberSort',
        xyName: 'xyNameSort',
        taskName: 'taskNameSort',
        acquisitionPoints: 'pointsCapSort'
      };

      // 提取排序方向的函数
      const getSortOrder = (order) => {
        if (order === 'ascending') return 'asc';
        if (order === 'descending') return 'desc';
        return null;  // 如果不是 'ascending' 或 'descending'，返回 null
      };

      // 获取对应的排序字段和排序方向
      const sortField = sortMap[row.prop];
      const sortOrder = getSortOrder(row.order);

      // 如果找到对应的排序字段，则调用 getList
      if (sortField) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 10;
        Object.keys(sortMap).forEach((key) => {
          const oldSortField = sortMap[key];
          if (this.queryParams[oldSortField]) {
            delete this.queryParams[oldSortField];
          }
        })
        this.queryParams[sortField] = sortOrder;
        // this.getList({ [sortField]: sortOrder });
        this.getList();
      }
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      const time = this.dateRangeQuery && this.dateRangeQuery.length > 0 ? { startTime: this.dateRangeQuery[0] + ' 00:00:00', endTime: this.dateRangeQuery[1] + ' 23:59:59' } : {};
      const query = {
        xyIdList: this.queryParams.faceXy,
        zyIdList: this.queryParams.faceZy,
        bjIdList: this.queryParams.faceBj,
        ...time,
        ...this.queryParams
      };
      query.faceXy ? delete query.faceXy : '';
      query.faceZy ? delete query.faceZy : '';
      query.faceBj ? delete query.faceBj : '';
      getSchoolCheck(query).then(
        (response) => {
          this.tableList = response.rows;
          this.total = response.total;
          this.loading = false;
        }
      ).catch(err => {
        this.loading = false;
      });
    },
    // 查询学院
    getListProxy() {
      listProxy().then((response) => {
        this.proxyList = response.rows;
      });
    },
    // 查询专业
    getListProzy() {
      this.prozyList = [];
      listProzy({ xyIds: this.queryParams.faceXy }).then((response) => {
        this.prozyList = response.rows;
        this.probjList = [];
        if (response.rows.length > 0) {
          this.getListProbj();
        }
      });
    },
    // 查询班级
    getListProbj() {
      let query = {
        zyIds: this.queryParams.faceZy && this.queryParams.faceZy.length > 0 ? this.queryParams.faceZy : this.prozyList.map(v => v.id),
        njIds: this.queryParams.njName || this.pronjAllList.map(v => v.name)
      };
      // if (this.queryParams.faceZy && this.queryParams.faceZy.length > 0) {
      //   query = { zyIds: this.queryParams.faceZy };
      // } else {
      //   query = { zyIds: this.prozyList.map(v => v.id) };
      // }

      listProbj(query).then((response) => {
        this.probjList = response.rows;
      });
    },
    // 查询年级
    getListPronj() {
      pronjList().then((response) => {
        this.pronjAllList = response.rows;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
    },
    /** 搜索按钮操作 */
    handleQuery(type) {
      if (type == '学院') {
        this.prozyList = [];
        this.queryParams.faceZy = null;
        this.queryParams.faceBj = null;
        this.getListProzy(this.queryParams.faceXy);
      }

      if (type == '专业' || type == '年级') {
        this.queryParams.faceBj = null;
        if (this.prozyList.length > 0) {
          this.getListProbj();
        }
      }
      this.queryParams.pageNum = 1;
      this.getList();
    },
    changeType() {
      this.getSelectorListTaks();
      this.handleQuery();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeQuery = [];
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
      this.getListProxy();
      this.getListProzy();
      this.getListProbj();
      this.getListPronj();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = { ...row };
      this.$nextTick(() => {
        this.form.studentFileList.forEach((item, fileIndex) => {
          this.fetchImage(item.file, fileIndex)
        })
      })
      this.form.statusType = this.form.status == 1 ? '未审批' : this.form.status == 2 ? '院级通过' : this.form.status == 3 ? '校级通过' : '已驳回';
      this.activeList = [];
      const timeFields = [
        { key: 'createTime', title: '提交时间', activeValue: 1 },
        { key: 'collegeCheckTime', title: '院级审核时间', activeValue: 2 },
        { key: 'schoolCheckTime', title: this.form.status == 4 ? '校级驳回时间' : '校级审核时间', activeValue: 3 }
      ];

      timeFields.forEach(field => {
        if (this.form[field.key]) {
          this.active = field.activeValue;
          this.activeList.push({ title: field.title, time: this.form[field.key], pingyu: '123' });
        }
      });
      this.open = true;
    },
    /** 提交按钮 */
    submitForm() {
      checkPass({ ids: [this.form.id], status: 3 }).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("审核成功");
          this.ids = [];
          this.form = {};
          this.getList();
          this.open = false;
        }
      })
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      // this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    download(url) {
      // window.open(process.env.VUE_APP_BASE_FILE + url);
      window.open(url);
    },
    async downloadFile(item) {
      if (item.fileType == 'pdf' || item.fileName.split('.')[item.fileName.split('.').length - 1] == 'pdf') {
        try {
          const response = await fetch(process.env.VUE_APP_BASE_FILE + item.file);
          const blob = await response.blob();

          const link = document.createElement("a");
          link.href = URL.createObjectURL(blob); // 创建对象 URL
          link.download = item.fileName; // 设置下载文件名
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          URL.revokeObjectURL(link.href); // 释放对象 URL
        } catch (error) {
          console.error("下载失败：", error);
        }
      } else {
        const link = document.createElement("a");
        link.href = process.env.VUE_APP_BASE_FILE + item.file; // 文件路径
        link.download = item.fileName; // 下载后的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    },
    // 批量通过
    submitAllForm() {
      this.$confirm('是否确认同时审核"' + this.ids.length + '"条实践报告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      }).then(() => {
        checkPass({ ids: this.ids, status: 3 }).then(() => {
          this.ids = [];
          this.getList();
          this.$modal.msgSuccess("审核成功");
        });
      }).catch(() => { });
    },
    // 批量驳回
    handleAllDelete() {
      // const studentNameList = [];
      // this.tableList.forEach(v => {
      //   this.ids.forEach(y => {
      //     if (y === v.id) {
      //       studentNameList.push(v.studentName);
      //     }
      //   })
      // });studentNameList.join('、')
      this.$confirm('是否确认驳回学生"' + this.ids.length + '"条实践报告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showInput: true,  // 启用输入框
        inputPlaceholder: '请输入驳回原因',  // 输入框提示文本
      }).then(input => {
        if (!input.value) {
          this.$modal.msgWarning("请添写驳回理由!")
          this.handleDelete(row)
          return
        };
        checkPass({ ids: this.ids, status: 4, reason: input.value, schoolCheckTime: this.getDate() }).then(() => {
          this.ids = [];
          this.open = false;
          this.getList();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => { });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认驳回学生"' + row.studentName + '"的实践报告？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        showInput: true,  // 启用输入框
        inputPlaceholder: '请输入驳回原因',  // 输入框提示文本
      }).then(input => {
        if (!input.value) {
          this.$modal.msgWarning("请添写驳回理由!")
          this.handleDelete(row)
          return
        };
        checkPass({ ids: [row.id], status: 4, reason: input.value, schoolCheckTime: this.getDate() }).then(() => {
          this.form = {};
          this.ids = [];
          this.open = false;
          this.getList();
          this.$modal.msgSuccess("驳回成功");
        });
      }).catch(() => { });
    },
    getDate() {
      const now = new Date();

      const year = now.getFullYear();  // 获取年份
      const month = String(now.getMonth() + 1).padStart(2, '0');  // 获取月份，月从 0 开始，所以需要加 1，使用 padStart 补充零
      const day = String(now.getDate()).padStart(2, '0');  // 获取日期，使用 padStart 补充零

      const hours = String(now.getHours()).padStart(2, '0');  // 获取小时，补充零
      const minutes = String(now.getMinutes()).padStart(2, '0');  // 获取分钟，补充零
      const seconds = String(now.getSeconds()).padStart(2, '0');  // 获取秒数，补充零

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep input {
  padding: 0 5px !important;
}

.fileImage {
  display: flex;
  overflow-x: auto;
}

::v-deep .el-col-1 {
  #butId {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

.dialogClass {
  ::v-deep .el-dialog__body {
    padding-top: 0 !important;
  }

  ::v-deep .el-form-item {
    margin-bottom: 10px !important;

    .el-input {
      width: 80% !important;
    }
  }

  .inforClass {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    /* 使用 flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
  }

  .inforClass::before {
    content: '';
    width: 5px;
    height: 25px;
    background-color: #419eff;
    margin-right: 10px;
    display: inline-block;
  }
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .el-range__close-icon {
  width: 0 !important;
}

::v-deep .el-date-editor {
  input {
    padding: 0 !important;
  }
}
</style>
